<template>
    <div>
        <div v-for="item in list" class="card">

            <el-card :body-style="{ padding: '5px',}" style="position: relative">
                <img src="https://img0.baidu.com/it/u=365103223,2186487667&fm=26&fmt=auto" class="image" style="width: 300px;height:300px">
                <div class="card_context" >
                    <h1>类型：{{item.type}}</h1>
                    <h2>位置：{{item.location}}</h2>
                    <h2>房主：{{item.landlord_id}}</h2>
                    <h2>价格：{{item.price}}</h2>
                    <h2>可居住人数：{{item.person_num}}</h2>
                    <div class="bottom clearfix">
                        <el-button type="text" class="button">联系房主</el-button>
                    </div>
                </div>
            </el-card>
        </div>

    </div>
</template>

<script>
import {fetchAllHouses} from "../../api/houseManage";

export default {
    name: "house",
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getAllHouses(){
            fetchAllHouses().then(res =>{
                this.list=res.data.list;
                console.log(this.list)
            })
        },
    },
    created() {
        this.getAllHouses()
    }
}
</script>

<style scoped>
    .card{
        margin-bottom:20px;
        width:50%;
        float: left;
    }
    .card_context{
        position: absolute;
        left: 360px;
        top:10px;
    }
    .card_context h1{
        margin:0px;
        padding:0px;
        font-family:"微软雅黑","黑体","宋体";
        font-size:30px;
        font-weight: lighter;
        height:45px;
    }
    .card_context h2{
        margin:0px;
        padding:0px;
        font-family:"微软雅黑","黑体","宋体";
        font-size:20px;
        font-weight: lighter;
        height:36px;
    }
</style>